<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<style type="text/css">
			html,body { background-color:#F7F8FA; }
			.waybill{ padding: 25px; background: linear-gradient(to right, #69A8B0, #83BFC7); color:#fff;}
			.waybill img{ width: 34px; margin-right: 10px;}
			.waybill b{ display:block; font-size: 15px; font-weight: 600; line-height: 20px;}
			.waybill p{ font-size: 12px; }
			
			.detial_info{ padding: 5px 15px 70px;;}
			.detial_info b{ display:block; font-size: 12px; color: #808080; font-weight: 400; line-height: 35px; padding-left: 20px; background-position: left center; background-repeat: no-repeat; background-size: 15px auto;}
			.intros{ margin-bottom: 7px; background-color:#fff; border-radius: 3px; padding: 7px 10px; font-size: 14px; color: #999; line-height: 20px;}
			.intros p{ padding: 2px 0;}
			.intros i{ color:#000;}
			.intros div img{ float:left; width: 23.125%; margin-right: 2.5%; margin-bottom: 2%; border-radius: 3px;}
			.intros div img:nth-child(4n+4){ margin-right: 0;}
			.contact_people{ margin-bottom: 7px; padding: 13px 10px; background-color: #fff; border-radius: 3px; overflow: hidden;}
			.contact_people img{ width: 40px; height: 40px; border-radius: 50%;}
			.contact_people .m_cell_hd img{ margin-right: 5px;}
			.contact_people li:last-child a{ margin-left: 15px;}
			.contact_people p{ font-size: 12px;}
			.contact_people h4{ display:block; font-size: 15px; line-height: 20px;}
			.route{ padding: 0 10px; position: relative; background-color: #fff; border-radius: 3px; overflow: hidden;}
			.route li{ margin-top: 17px;}
			.route h4{ display:block; padding-left: 23px; position: relative; font-size: 16px; font-weight: 400; color: #333; line-height: 35px; height: 35px;}
			.route h4 a{ position:absolute; right: 0; top: 3px; height: 28px; width: 35px; background: url(../../image/img_11.jpg) no-repeat right center; background-size: auto 100%;}
			.route h4 img{ position:absolute; left: 0; top: 50%; margin-top: -9px; width: 18px;}
			.route p{ padding-left: 23px; font-size: 13px; color: #999; padding-right: 40px; line-height: 20px; height: 40px; overflow: hidden;}
			.route i{ display:block; position: absolute; left: 18px; top: 52px; height: 60px; width: 4px; background: url(../../image/img_59.png) no-repeat center center; background-size: auto 100%;}
			
			.pay{ background-color:#fff; overflow: hidden; padding-left: 10px; height: 45px; box-shadow: 0 -1px 3px rgba(0,0,0,0.02);}
			.pay button{ display:block; border: 0; color: #fff; font-size: 14px; background: linear-gradient(to right, #019cfd, #2354f9); height: 45px; width: 80px;}
			.pay p{ font-size: 13px; color: #333; line-height: 18px;}
			.pay b{ font-size: 16px;}
			.pay span{ display:block; font-size: 12px; color: #f85a60; line-height: 18px;}

			.bg{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.4); z-index: 10;}
			.detial_box{ position:fixed; left: 50%; margin-left: -130px; top: 50%; margin-top: -87px; width: 260px; padding-top: 20px; text-align: center; background-color: #fff; border-radius: 3px; z-index: 11; box-sizing: border-box; overflow: hidden;}
			.detial_box img{ margin:0 auto; width: 50px;}
			.detial_box b{ display:block; font-size: 15px; font-weight: 400; color: #333; line-height: 20px; padding-top: 10px;}
			.detial_box p{ font-size: 12px; color: #999; padding-bottom: 15px;}
			.detial_box button{ display:block; border: 0; position: relative; border-radius: 0; background-color: transparent; width: 100%; height: 40px; font-size: 14px; color: #1c63fa;}
			.detial_box button::after{ position:absolute; content: ""; left: 0; top: 0; right: 0; border-top: 1px #f0f0f0 solid; transform: translateY(0.5);}
			
			.add_btns{ position: fixed; left: 0; right: 0; bottom: 0; background-color: #fff; }
			.add_btns .wrapper{ padding:1px 0;width:100%;}
			.add_btns .btn{ background-color:#fff; font-size:15px; color:#333; height: 48px; width:100%; border:0; }
			.border-r {
				border: none;
				background-image: -webkit-linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
				background-image: linear-gradient(270deg, #dddddd, #dddddd 50%, transparent 50%);
				background-size: 1px 100%;
				background-repeat: no-repeat;
				background-position: right;
			}
			.border-t{
				border: none;
				background-size: 100% 1px;
				background-repeat: no-repeat;
				background-position: top;
				background-image: linear-gradient(0,#dddddd,#dddddd 50%,transparent 50%);
				background-image: -webkit-linear-gradient(90deg,#dddddd,#dddddd 50%,transparent 50%);
			}
			.sk-three-bounce {
			  margin: 0 auto;
			  width: 80px;
			  text-align: center; }
			  .sk-three-bounce .sk-child {
				width: 13.5px;
				height: 13.5px;
				background-color: #3262F1;
				border-radius: 100%;
				display: inline-block;
				-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
						animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; }
			  .sk-three-bounce .sk-bounce1 {
				-webkit-animation-delay: -0.32s;
						animation-delay: -0.32s; }
			  .sk-three-bounce .sk-bounce2 {
				-webkit-animation-delay: -0.16s;
						animation-delay: -0.16s; }

			@-webkit-keyframes sk-three-bounce {
			  0%, 80%, 100% {
				-webkit-transform: scale(0);
						transform: scale(0); }
			  40% {
				-webkit-transform: scale(1);
						transform: scale(1); } }

			@keyframes sk-three-bounce {
			  0%, 80%, 100% {
				-webkit-transform: scale(0);
						transform: scale(0); }
			  40% {
				-webkit-transform: scale(1);
						transform: scale(1); }
			}
		</style>
	</head>
	<body>
		<div id="billdetail">
		</div>
		<script id="billdetail_template" type="text/template">
		<div class="waybill">
			<div class="m_cell_hd"><img src="../../image/billstatus{{=it.status}}.png" alt="" /></div>
			<div class="m_cell_ft m_cell_primary">
				{{? it.status == 1}}
				<b>运单进行中</b>
					{{? it.shipperuid == myuid}}
					<p>司机已支付定金，等待司机确认送达中</p>
					{{??}}
					<p>运输完成后，请确认送达目的地</p>
					{{?}}
				{{?? it.status == 2}}
				<b>运单待确认</b>
					{{? it.shipperuid == myuid}}
					<p>如货物已送达，请确认收货</p>
					{{??}}
					<p>已确认运输完成，等待货主确认中</p>
					{{?}}
				{{?? it.status == 3}}
				<b>运单已完成</b>
				<p>货主已完成收货确认</p>
				{{?}}
			</div>
		</div>
		<div class="detial_info">
			<b style="background-image: url(../../image/img_57.png);">联系人</b>
		  <ul class="contact_people">
				<li class="m_cell_hd"><img onload="fnLoadImage(this);" data-url="{{=it.avatar}}" src="../../image/defaultimg.png" onerror="javascript:this.src='../../image/defaultimg.png';" /></li>
				<li class="m_cell_hd m_cell_primary">
					<p>{{=it.realname}}</p>
					<h4>{{=it.mobile}}</h4>
				</li>
				{{? it.uid != myuid}}
				<li class="m_cell_ft"><a href="javascript:;" tapmode onclick="chat({{=it.myfriend}},'{{=it.mobile}}','{{=it.realname}}');"><img src="../../image/img_58.png" alt="" /></a></li>
				<li class="m_cell_ft"><a href="javascript:;" tapmode onclick="checkcall('{{=it.mobile}}')"><img src="../../image/img_34.png" alt="" /></a></li>
				{{?}}
			</ul>

			<b style="background-image: url(../../image/img_51.png);">线路信息</b>
			<ul class="route">
				<i></i>
				<li>
					<h4><img src="../../image/img_42.png" alt="" />{{=it.sendarea}}<a href="javascript:;" tapmode onclick="openMap('send');"></a></h4>
					<p>{{=it.sendaddress}}</p>
				</li>
			  <li>
					<h4><img src="../../image/img_41.png" alt="" />{{=it.destarea}}<a href="javascript:;" tapmode onclick="openMap('dest');"></a></h4>
					<p>{{=it.destaddress}}</p>
				</li>
			</ul>
			
			<b style="background-image: url(../../image/img_52.png);">装车时间</b>
			<ul class="intros">
				<p><i>{{=it.loadingdate}}</i></p>
			</ul>
			
			<b style="background-image: url(../../image/img_55.png);">运费及支付方式</b>
			<ul class="intros">
				<p>运费&nbsp;<i>￥{{=it.fee}}</i></p>
				<p>支付方式&nbsp;<i>{{=it.paytype}}</i></p>
			</ul>
			
			<b style="background-image: url(../../image/img_54.png);">用车要求</b>
			<ul class="intros">
				<p>用车类型&nbsp;<i>{{=it.transporttype}}</i></p>
				<p>车型要求&nbsp;<i>{{=it.cartype}}</i></p>
				<p>车长要求&nbsp;<i>{{=it.carlen}}</i></p>
			</ul>
			
			<b style="background-image: url(../../image/img_56.png);">货物信息</b>
			<ul class="intros">
				<p><i>{{=it.goodsname}} {{=it.goodsweight}}吨/{{=it.goodsvolume}}m³</i></p>
				<div class="clearfix">
				{{ for (var i = 0, len = it.thumbs.length; i < len; i++) { }}
				<img onload="fnLoadImage(this)" tapmode onclick="fnOpen({{=i}});" data-url="{{=it.thumbs[i]}}" src="../../image/rec.png" alt="" />
				{{ } }}
				</div>
			</ul>
			
			<b style="background-image: url(../../image/img_53.png);">备注</b>
			<ul class="intros">
				{{? it.memo == ''}}
				<p><i>无</i></p>
				{{??}}
				<p><i>{{=it.memo}}</i></p>
				{{?}}
			</ul>
		</div>
		<!--运单详情end-->

		{{? it.status == 1}}
			{{? it.driveruid == myuid}}
			<div class="s_fix">
				<button class="d_btn" tapmode="btnpress" onclick="songda();">确认送达目的地</button>
			</div>
			{{?}}
		{{?? it.status == 2}}
		<div class="s_fix">
			{{? it.shipperuid == myuid}}
			<button class="d_btn" tapmode="btnpress" onclick="AjaxData(3);">确认收货</button>
			{{??}}
			<button class="d_btn btnpress">等待企业确认</button>
			{{?}}
		</div>
		{{?}}
		</script>
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script type="text/javascript" src="../../script/app.js" ></script>
	<script type="text/javascript" src="../../script/permission.js"></script>
	<script type="text/javascript" src="../../script/doT.js"></script>
	<script type="text/javascript">
		var billid;
		var photoBrowser;
		var imgs;
		var rong;
		var myuid,myavatar,mylocalavatar;
		var sendlon = '', sendlat = '', destlon = '', destlat = '';
		var openimged = 0;
		var UILoading;
		apiready = function() {
			api.parseTapmode();
			UILoading = api.require('UILoading');
			rong = api.require('rongCloud2');
			photoBrowser = api.require('photoBrowser');
			showloading();
			billid = api.pageParam.billid;
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret && ret.value)
				{
					var userinfo = JSON.parse(ret.value);
					myuid = userinfo.mobile;
					myavatar = userinfo.avatar;
					fnLoadMyImage(userinfo.avatar);					
				}
			});
			getJsonFromAPI();
			api.addEventListener({
				name : 'keyback'
			}, function(ret, err) {
				if(openimged == 1) {
					openimged = 0;
					photoBrowser.close();
				}
				else
				{
					api.closeWin({
					});
				}
			});
			api.addEventListener({
				name : 'refreshavatar'
			}, function(ret, err) {
				api.getPrefs({
					key: 'user_info'
				}, function(ret, err) {
					if (ret && ret.value)
					{
						var userinfo = JSON.parse(ret.value);
						myuid = userinfo.mobile;
						myavatar = userinfo.avatar;
						fnLoadMyImage(userinfo.avatar);					
					}
				});				
			});
			api.addEventListener({
                name: 'navitembtn'
            }, function(ret, err) {
                if (ret.type == 'left') {
					api.closeWin({
					});
                }
            });
			api.addEventListener({
				name : 'reloadpage'
			}, function(ret, err) {
				getJsonFromAPI();				
			});
		}
		function songda() {
			api.confirm({
				title: '确认送达目的地',
				msg: '请确认是否送达目的地？',
				buttons: ['取消', '确定送达']
			}, function(ret, err) {
				var index = ret.buttonIndex;
				if(index == 2)
				{
					AjaxData(2);
				}
			});
		}
		function checkcall(tel) {
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret.value) {
					var userinfo = JSON.parse(ret.value);
					
					if(userinfo.status!=1){
						tipbox(userinfo.status);
						return;
					}
					call(tel);
				}
			});
		}
		function call(tel) {
			var pername = 'phone';
			var perdesc = '拨打电话';
			if (api.systemType == "android") {
				if(!confirmPer(pername,perdesc,'')){
					return;
				}
			}		
			if(tel != '')
			{
				if(api.systemType == 'ios'){
					api.call({
						type: 'tel_prompt',
						number: tel
					});
				}else{
					api.confirm({
						title: '确认拨打电话吗?',
						msg: tel,
						buttons: ['取消', '呼叫']
					}, function(ret, err) {
						var index = ret.buttonIndex;
						if(index == 2)
						{
							api.call({
								type: 'tel',
								number: tel
							});
						}
					});
				}
			}
		}
		function fnLoadMyImage(dataUrl) {
			if(dataUrl!=''){
				api.imageCache({
					url: dataUrl
				}, function(ret, err) {
				
					if(ret && ret.status == true){
						mylocalavatar = ret.url;
						
					}
				});
			}
		}
		function addfriend(uid) {
			openNavWin('#ddd','sendinvite_win','../msg/sendinvite_frm.html','朋友验证',false,false,true,[{text:'发送',color:'#3262F1',fontSize:14}],{dfuid:uid});
		}
		function chat(ismyfriend, dfuid, dfnickname) {
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret.value) {
					var userinfo = JSON.parse(ret.value);
					
					if(userinfo.status!=1){
						tipbox(userinfo.status);
						return;
					}
					if(ismyfriend != 1) {
						api.confirm({
							title: '提示',
							msg: '对方还不是您的好友，快去添加好友吧！',
							buttons: ['添加好友', '取消']
						}, function(ret, err) {
							var index = ret.buttonIndex;
							if(index == 1) {
								addfriend(dfuid);
							}
						});
						return;
					}
					var dflocalavatar = $api.attr($api.byId('avatar'),'src');
					var dfavatar = $api.attr($api.byId('avatar'),'data-url');
					var params = {
						dfuid: dfuid,
						dfnickname : dfnickname,
						dflocalavatar : dflocalavatar,
						dfavatar : dfavatar,
						mylocalavatar: mylocalavatar
					};
					opWin('chat_win','../msg/chat_win.html',true,params,false);
					//openNavWin('#ddd','chat_win','../msg/chat_frm.html',dfnickname,false,false,true,[],params);
				}
			});
			
		}
		function openMap(type) {
			//调用第三方导航
			var lon = sendlon;
			var lat = sendlat;
			var addrname = '出发地';
			if(type == 'dest') {
				lon = destlon;
				lat = destlat;
				addrname = '目的地';
			}
			var amap = api.appInstalled({
				sync: true,
				appBundle: api.systemType === 'android' ? 'com.autonavi.minimap' : 'iosamap'
			});
			var bmap = api.appInstalled({
				sync: true,
				appBundle: api.systemType === 'android' ? 'com.baidu.BaiduMap' : 'baidumap'
			});
			var bttons = [];
			amap && bttons.push('高德地图');
			bmap && bttons.push('百度地图');
			if (bttons.length === 0) return toast('你未安装百度地图或高德地图');
			api.actionSheet({
				title: '选择导航',
				cancelTitle: '取消',
				buttons: bttons
			}, function (ret, err) {
				if (bttons[ret.buttonIndex - 1] === '高德地图') {
					var src = api.appName;
					api.openApp({
						androidPkg: 'android.intent.action.VIEW' ,
						appParam:{
							sourceApplication: src,
							poiname: '',
							lat: lat,
							lon: lon,
							dev: '1',
							style: '2'     
						},
						uri:"androidamap://navi?lat=" + lat + "&lon=" + lon +"&dev=0&style=2",
						iosUrl:'iosamap://navi?'
					},function(ret,err){
												
					});
				} else if (bttons[ret.buttonIndex - 1] === '百度地图') {
					var dest = 'latlng:'+lat+','+lon;
					dest = 'name:'+addrname+'|'+dest;
					var src = api.appName;
					api.openApp({
						androidPkg: 'android.intent.action.VIEW' ,
						appParam:{
							origin:'',
							destination:dest,
							region:'',
							mode:'driving',
							src:src      
						},
						uri:'intent://map/direction?origin=&destination='+dest+'&mode=driving&region=&src='+src+'#Intent;scheme=bdapp;package=com.baidu.BaiduMap;end',
						iosUrl:'baidumap://map/direction'
					},function(ret,err){
												
					});
				}
			});

		}
		function AjaxData(status) {
			//设置状态
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret.value) {
					var userinfo = JSON.parse(ret.value);
					api.ajax({
						url: ApiUrl + '/v1/billdetail',
						method: 'post',
						cache: false,
						headers: {
							authorization: kAppKey+';'+userinfo.access_token+';'+userinfo.uid
						},
						data: {
							values: {
								billid: billid,
								type: 'changestatus',
								status: status
							}
						}
					}, function(ret, err) {
						if (ret) {
							api.sendEvent({
								name : 'refreshbill'
							});
							if(status == 2) {
								api.alert({
									title: '确认送达',
									msg: '已确认送达目的地，等待企业确认收货！',
								}, function(ret, err) {
									if(ret.buttonIndex == 1)
									{
										api.closeWin({
										});
									}
								});
							}
							else if(status == 3) {
								api.alert({
									title: '确认收货',
									msg: '已确认收货，运单已完成！',
								}, function(ret, err) {
									if(ret.buttonIndex == 1)
									{
										api.closeWin({
										});
									}
								});
							}
							//toast(ret.msg);
						} else {
							if(err.statusCode==402)
							{
								Relogin();
							}
							else
							{
								console.log(JSON.stringify(err));
								//toast('网络异常');
							}
						}
					});
				}
			});
		}
		function fnLoadImage(obj) {
			obj.onload = null;
			var dataUrl = $api.attr(obj, 'data-url');
			if(dataUrl!=''){
				api.imageCache({
					url: dataUrl
				}, function(ret, err) {
					if(ret && ret.status == true){
						obj.src = ret.url;
					}
				});
			}
		}
		function fnOpen(index) {
			console.log(JSON.stringify(imgs));
			openimged = 1;
			photoBrowser.open({
					images: imgs,
					activeIndex: index,
					//placeholderImg: 'widget://image/apicloud.png',
					bgColor: '#000'
			}, function(ret) {
				if (ret.eventType == 'click') {
					photoBrowser.close();
					openimged = 0;
				}
			});
        }
		function getJsonFromAPI() {
			//从接口获取查询数据
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret.value) {
					var userinfo = JSON.parse(ret.value);
					myuid = userinfo.uid;
					api.ajax({
						url: ApiUrl + '/v1/billdetail/'+billid,
						method: 'get',
						cache: false,
						timeout: 10,
						headers: {
							authorization: kAppKey+';'+userinfo.access_token+';'+userinfo.uid
						}
					}, function(ret, err) {
						hideloading();
						if (ret) {
							sendlon = ret.bill.sendlon;
							sendlat = ret.bill.sendlat;
							destlon = ret.bill.destlon;
							destlat = ret.bill.destlat;
							imgs = ret.bill.thumbs;
							var billdetail = ret.bill;
							if(billdetail.status == 3)
							{
								//$api.attr($api.byId('topbg'),'src','../../image/img_95.png');
								//$api.attr($api.byId('topmsg'),'src','../../image/companyauthstate_1.png');
								//$api.text($api.byId('state'),'发布已完成');
								//$api.remove($api.dom('.add_btns'));
								
								api.sendEvent({
									name : 'refreshbill'
								});
							}
							else if(billdetail.status == -1)
							{
								api.alert({ msg: '运单已删除' });
								return false;
							}
							UpdateList('billdetail','billdetail_template',billdetail);
							

						} else {
							if(err.statusCode==402)
							{
								Relogin();
							}
							else
							{
								toast('网络异常');
								console.log(JSON.stringify(err));
							}
						}
					});
				}
			});
		}
		//渲染数据
		function UpdateList(domId,templateId,jsondata) {
			var act_content = $api.byId(domId);
			var tempFn = doT.template($api.byId(templateId).innerHTML);
			var resultText = tempFn(jsondata);
			$api.html(act_content, resultText);
			api.parseTapmode();
			
			
		}
	</script>
</html>